<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<ui:composition template="/WEB-INF/qTemplate.xhtml"
                xmlns="http://www.w3.org/1999/xhtml"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:ui="http://java.sun.com/jsf/facelets" 
                xmlns:p="http://primefaces.org/ui"

                xmlns:c="http://java.sun.com/jsp/jstl/core">

    <ui:define name="title">Current Trip</ui:define>
    <ui:define name="content">
        <div id="main"  >
            <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
            <script>
                $(document).ready(function() {
                    $("#map_canvas").load(function()
                    {
                        localize("#{CurrentTripTableBean.currentLocation}");
                        return false;
                    });
                    var geocoder;

                    function placeMarker() {
                        geocoder = new google.maps.Geocoder();

                        directionsDisplay = new google.maps.DirectionsRenderer();
                        var chicago = new google.maps.LatLng(51.850033, -87.6500523);
                        var mapOptions = {
                            zoom: 15,
                            mapTypeId: google.maps.MapTypeId.ROADMAP,
                            center: chicago
                        }
                        map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
                        directionsDisplay.setMap(map);
                        geocoder.geocode({'address': "#{CurrentTripTableBean.currentLocation}"}, function(results, status) {
                            if (status == google.maps.GeocoderStatus.OK) {
                                map.setCenter(results[0].geometry.location);
                                var marker = new google.maps.Marker({
                                    map: map,
                                    position: results[0].geometry.location
                                });
                            } else {
                                alert("Geocode was not successful for the following reason: " + status);
                            }
                        });



                    }
                    window.onload = function() {
                        isSignOn();
                        placeMarker();
                    }

                });
            </script>
            <div id="indexLeftColumn" >
                <ul> 
                    <li><a href="qCurrentTrip.xhtml">Current Trip</a></li>
                    <li><a href="qMyTrips.xhtml">My Trips</a></li> 
                    <li><a href="planTripInfo.xhtml">Plan A Trip</a></li>
                    <li><a href="qUploadPhotoList.xhtml">My Media</a></li>
                </ul> 
            </div>
            <div id="indexRightColumn">

                <h:form style="width: 800px;padding-left: 100px;padding-top: 20px;">
                    <c:if test="#{CurrentTripTableBean.tripName!=null}">
                        <div>
                            <p:dataTable var="car" value="Trip Name" style="">  
                                <p:column headerText="Trip Name">  
                                    <a href="qEditCurrentTrip.xhtml">
                                        <h:outputText value="#{CurrentTripTableBean.tripName}" />  
                                    </a>
                                </p:column>  
                                <p:column headerText="Location">  
                                    <h:outputText value="#{CurrentTripTableBean.startLocation}" />  
                                </p:column>
                                <p:column headerText="Destination">  
                                    <h:outputText value="#{CurrentTripTableBean.destination}" />  
                                </p:column>  
                                <p:column headerText="Current Location">  
                                    <h:outputText value="#{CurrentTripTableBean.currentLocation}" />  
                                </p:column>  
                            </p:dataTable>  
                        </div>

                        <div onclick="localize('#{CurrentTripTableBean.currentLocation}')"  id="map_canvas" style="margin-top: 10px; float:left;width:800px;height:300px;"></div>
                    </c:if>
                    <c:if test="#{CurrentTripTableBean.tripName==null}">
                        <div style="padding-top: 100px">
                            No current trip! Start planning now by selecting "Plan A Trip" on the left side!
                        </div>
                    </c:if>
                </h:form>  
            </div>
        </div>
    </ui:define>
</ui:composition>